<template>
	<div id="Login-all">
		<div id='logo'>三角洲接单平台</div>
		<div id='login'>
			<el-card class="box-card">	
				<div id="form">
					<el-input
					      placeholder="请输入用户名"
					      v-model="username"
					      clearable @keydown.enter.native="onEnter"  tabindex="0">
					    </el-input>
					<el-input placeholder="请输入密码" v-model="password" show-password @keydown.enter.native="onEnter"  tabindex="0"></el-input>
					
					<el-button :plain="true" type="primary" v-on:click="login" >登录</el-button>
					<div>
						<el-link id="register" v-on:click="registry">还没有账号，现在去注册</el-link>
					</div>
					
				</div>
			</el-card>
			<div id="clock">
				<div id="time">{{time}}</div>
				<div id="date">{{date}}</div>
			</div>
			
			<div id="copyright">Copyright © 2025 TalkSage, All Rights Reserved</div>
		</div>
	</div>
</template>

<script>
	// import axios from 'axios'
	import requests from '@/utils/request';
	// import Request from '@/api/request';
	// import requests from '@/utils/request';
	export default{
		data(){
			return{
				username:"",
				password:"",
				time:"",
				date:"",
				passwordError: false,
				passwordErrorMessage: '密码不能为空',
			}
		},

		mounted(){
			// this.$nextTick(()=>{
			// 	this.update_clock();
			// })
			this.checkToken();
			window.setInterval(() => {
			    this.update_clock()
			  }, 1000)
		},
		methods:{
			onEnter:function(){
				if (event.keyCode === 13 || event.key === "Enter") {
				        // Trigger your event or call your function
				        this.login();
				      }
			},
			update_clock:function(){
				var d=new Date();
				var year=d.getFullYear();
				var month=d.getMonth()+1;
				if(month<10){
					month="0"+month;
				}
				var day=d.getDate();
				if(day<10){
					day="0"+day;
				}
				var hour=d.getHours();
				if(hour<10){
					hour="0"+hour;
				}
				var minute=d.getMinutes();
				if(minute<10){
					minute="0"+minute;
				}
				var seconds=d.getSeconds();
				if(seconds<10){
					seconds="0"+seconds;
				}
				this.time=hour+":"+minute+":"+seconds;
				this.date=year+"/"+month+"/"+day
			},
			login: function(e) {
			    // 阻止表单默认提交行为
			    if (e && e.preventDefault) {
			      e.preventDefault();
			    }
			    
			    if (!this.password) {
			      this.$message.error("请输入密码");
			      return;
			    }
			    if (!this.username) {
			      this.$message.error("请输入用户名");
			      return;
			    }
			    
			    if (this.username && this.password) {
			      // 使用您的requests实例替代Request
			      requests.post('/user/login', {
			        username: this.username,
			        password: this.password
			      })
			      .then(res => {
			        console.log(res.code); // 注意：这里直接使用res.code，因为拦截器已经处理了响应结构
			        if (res.code == "200") {
			          localStorage.setItem('id', res.data.id);
			          localStorage.setItem('username', res.data.username);
			          localStorage.setItem('token', res.data.token);
			          
			          this.$message({
			            message: '登录成功，正在跳转页面！',
			            type: 'success'
			          });
			          
			          setTimeout(() => {
			            this.$router.push('/detail');
			          }, 1500);
			        } else if (res.code == "10002") {
			          this.$message.error(res.msg);
			        }
			      })
			      .catch(error => {
			        console.error('登录错误:', error);
			        if (error.response && error.response.status == 500) {
			          this.$message.error("连接超时!");
			        } else {
			          this.$message.error("登录失败，请检查网络连接");
			        }
			      });
			    }
			  },
			  
			  registry: function() {
			    this.$router.push('/registry');
			  },
			  
			  checkToken() {
			    if (localStorage.getItem("token") != null && localStorage.getItem("token") != "") {
			      setTimeout(() => {
			        this.$router.push('/detail');
			      }, 1500);
			    }
			  }
		}
	}
</script>

<style scoped>
#Login-all{
	position: fixed;
	height: 100%;
	width: 100%;
	top:0;
	left: 0;
	background-image: linear-gradient(
	90deg,
	#39e274,
	purple
	);
	background-size: 400%;
	animation: myanimation 10s infinite;
}
@keyframes myanimation {
	0%{
		background-position: 0% 50%;
	}
	50%{
		background-position: 100% 50%;
	}
	100%{
		background-position: 0% 50%;
	}
}
#logo{
	color:aliceblue;
	font-size: 50px;
	font-weight: 800;
	position: absolute;
	top:15%;
	left: 15%;
}
.box-card{
	position: absolute;
	top: 30%;
	left: 40%;
	width: 500px;
	height: 250px;
	background-color: rgba(255, 255, 255, 0.4);
	border-radius: 15px;
}
#form{
	line-height: 60px;
	padding-left: 15px;
	padding-right: 15px;
	text-align: center;
	
}
#clock{
	color: aliceblue;
	position: absolute;
	top: 70%;
	left: 10%;
	text-align: center;
}
#time{
	font-size: 100px;
}
#date{
	font-size: 35px;
}
#copyright{
	color: aliceblue;
	position: absolute;
	top:97%;
	left: 40%;
}
#register{
	position: absolute;
	top: 57%;
	left: 62%;
	color: aliceblue;
}
</style>